// 退出功能
$(function () {
  // 未退出登录按钮绑定点击事件
  $('.logout').on('click', function () {
// 询问用户是否退出登录
layer.confirm('确认退出登陆吗?', {icon: 3, title:'提示'}, function(index){
  //do something 
  // 如果确认退出,先清空 token,
  localStorage.removeItem('token')
  // 跳转到登录页面
  location.href = '/liogin.html'
  // 关闭弹出层
  layer.close(index);
});   
  })

})


// 封装获取用户信息函数
function initUserInfo() {
  // 产生 401 响应状态码的两种情况
  // 1.没有把 token 发给 服务器
  // 2.服务器发送了一个假 token
  // promise.prototype.then(成功的回调,失败的回调)
  // 在.then 函数中,事件的回调可以省略不写,如果需要处理失败的回调需要雪上
  axios.get('/my/userinfo'
    // , {
    // // 自定义请求头
    // headers: {
    //   Authorization:localStorage.getItem('token')
    // },
    
    // }
  ).then(({ data: res }) => {
    console.log('成功!');
    console.log(res);
    // 
    renderUserInfo(res.data)
  }, (error) => {
    console.log('失败!')
    console.log(error)
    // 判断响应状态码是否等于 401
    if (error.response.status === 401) {
      // 如果是清空 token,
      localStorage.removeItem('token')
      // 跳转到登录页
      location.href = '/liogin.html'
    }
  })
}
// 调用获取用户信息的函数被
initUserInfo()

// 封装渲染用户信息函数
function renderUserInfo(data) {
  const name = data.nickname || data.username
    const textAvatar = name.charAt(0).toUpperCase()
//  渲染头部区域的用户信息
  // 判断用户是否有图片的头像,如果有执行 if 否则执行 else
  if (data.user_pic) {
    // 有图片头像
    $('#header-avatar').html(`<img src="${data.user_pic}"
    class="layui-nav-img">
    个人中心`)
  } else {
    // 没有图片头像,应该渲染文本头像
    $('#header-avatar').html(`     
  <div class="text-avatar">${textAvatar}</div>
  个人中心`)
  }
// 渲染侧边栏区域的用户信息
  if (data.user_pic) {
    // 渲染图片头像
    $('.user-info-box').html(`<img src="${data.user_pic}" class="layui-nav-img">
  <span class="welcome">&nbsp;欢迎&nbsp; ${name}</span>`)
  } else {
    // 渲染文本头像
    $('.user-info-box').html(` 
  <div class="text-avatar">${textAvatar}</div>
  <span class="welcome">&nbsp;欢迎&nbsp; ${name}</span>`)
  }
  // 在页面元素动态生成号之后,调用layui提供的element.render()函数
  // 更新渲染指定区域的动画效果
  layui.element.render('nav', 'header-nav')
}

// 定义切换高亮的函数
function higjtlight(kw) {
  console.log('index 页面中 higjtlight 函数被调用')
  $('dd').removeClass('layui-this')
  $(`dd:contains("${kw}")`).addClass('layui-this')
}